<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        预编译 css  
        less
        sass
        stylus


        less是css的预编译语言 可以定义变量 混合（类似于函数）
        不能被浏览器直接识别 需要借助考拉 将less解析为css
        less文件的后缀名.less

        父子元素嵌套写，兄弟元素并列写  解决权重 样式覆盖问题

        less中写备注 
        方式一：
        /**/ 备注中的内容会被解析到css文件
        方式二：
        //不会被解析到css文件中



        sass 基于ruby语言开发而成
        sass 不能被浏览器直接识别，将sass转换为css
        
        stylus 不能被浏览器直接识别，需要借助一些包将其解析为css
        后缀名 .styl

        node 自动装npm
        npm install -g stylus
        
        1.新建一个文件夹 stylus
        2.在文件夹中新建stylus文件 demo.styl
        3.在stylus文件夹内，建立dist文件夹
        stylus -w demo.styl -o dist

     -->
</body>

</html>